<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jay Chou</title>
    <link rel="stylesheet" href="./mainPage.css">
    <link rel="stylesheet" href="../resetcss/reset.css">
    <link rel="stylesheet" href="../fontawesome/css/all.css">
    <script src="./mainPage.js"></script>
</head>

<body>
    <!-- 周杰伦介绍的主页 -->

    <!-- 顶部菜单栏 -->
    <div class="nav-outer">

        <div class="nav-inner">

            <div class="nav-logo"></div>
            <img class="logo" src="./img/logo.png" alt="">

            <ul class="nav-menu">
                <li id="main-page-btn">首页</li>
                <li id="song-page-btn">歌曲</li>
                <li id="but-tic-btn">购票</li>
                <li id="my-btn">
                    <div class="profile"></div>
                    <span id="name">登录/注册</span>
                </li>
            </ul>

        </div>


    </div>

    <!-- 火箭鼠标 -->
    <div class="mouse">
        <div class="mouse-rocket"></div>
        <div class="mouse-fire"></div>
    </div>

    <!-- 背景 -->
    <div class="bg-all"></div>

    <!-- 顶部轮播图 -->
    <div class="shell">
        <!-- 图片 -->
        <ui class="images">
            <li class="img"></li>
            <li class="img"></li>
            <li class="img"></li>
        </ui>

        <!-- 小图标 -->
        <ui class="min-images">
            <li class="min"></li>
            <li class="min"></li>
            <li class="min"></li>
        </ui>

    </div>

    <!-- 人物介绍主体 -->
    <div class="intro">

        <div class="bg-left"></div>
        <div class="bg-right"></div>
        <div class="bg-middle"></div>
        <div class="bg-bottom"></div>
        <div class="bar-purple"></div>
        <div class="bar-blue"></div>

        <!-- 名字 -->
        <div class="intro-name">
            <!-- 中文名 -->
            <div class="Chinese-name">
                <img src="./img/周杰伦.png" alt="">
            </div>

            <!-- 英文名 -->
            <div class="Eng-name">
                <img src="./img/JAY CHOU.png" alt="">
            </div>
        </div>
        <a href="../loginPages/loginPages.html"></a>

        <!-- 专辑介绍 -->
        <div class="intro-cd">

            <div class="group1">
                <div class="cd-front"></div>
                <div class="cd-behind"></div>
                <div class="text-front">2000年发表首张个人专辑<br>
                    《JAY》以R&B和New Hip-Hop的新曲为主，加入了巴洛克式弦乐伴奏</div>
                <div class="text-behind">2001年发行的专辑《范特西》奠定其融合中西方音乐的风格<br>
                    该专辑获得第13届台湾金曲奖最佳流行音乐专辑奖等多项大奖</div>
            </div>

            <div class="group2">
                <div class="cd-front"></div>
                <div class="cd-behind"></div>
                <div class="text-front">2002年7月19日《八度空间》发表<br>
                    用旋律讲述青春的迷茫和困惑</div>
                <div class="text-behind">2003年7月19日<br>
                    《叶惠美》糅合中乐、少数民族及西方乐器，唱出了物换星移，故地不再的唏嘘</div>
            </div>

            <div class="group3">
                <div class="cd-front"></div>
                <div class="cd-behind"></div>
                <div class="text-front">2004年8月3日<br>
                    《七里香》用旋律讲述青春的迷茫和困惑</div>
                <div class="text-behind">2005年11月1日<br>
                    《十一月的萧邦》专辑主打歌“夜曲”令人心碎</div>
            </div>

            <div class="group4">
                <div class="cd-front"></div>
                <div class="cd-behind"></div>
                <div class="text-front">2006年9月5日<br>
                    《依然范特西》请出费玉清对唱主打歌《千里之外》</div>
                <div class="text-behind">2007年11月1日<br>
                    《我很忙》有着浓浓的美式乡村风格和复古曲调，充满活泼趣味</div>
            </div>

            <div class="group5">
                <div class="cd-front"></div>
                <div class="cd-behind"></div>
                <div class="text-front">2008年10月14日<br>
                    《魔杰座》融合了嘻哈和民谣的曲风</div>
                <div class="text-behind">2010年5月18日<br>
                    《跨时代》大玩穿越曲风，二胡、古筝轮番登场</div>
            </div>

            <div class="group6">
                <div class="cd-front"></div>
                <div class="cd-behind"></div>
                <div class="text-front">2011年11月11日<br>
                    《惊叹号》将美声、rap、B-BOX等唱腔糅合</div>
                <div class="text-behind">2012年12月28日<br>
                    《十二新作》把海鸥、苏格兰风笛、爱丁堡、中古世纪的感觉写进歌词中</div>
            </div>

            <div class="group7">
                <div class="cd-front"></div>
                <div class="cd-behind"></div>
                <div class="text-front">2014年12月26日<br>
                    《哎呦，不错哦》包含着周杰伦对之前专辑的回忆</div>
                <div class="text-behind">2016年6月24日<br>
                    《周杰伦的床边故事》可谓是经典的罗曼蒂克周氏音乐</div>
            </div>

        </div>

        <div class="continue">
            <img src="./img/未完待续....png" alt="">
        </div>

    </div>

    <!-- mv -->
    <div class="mv-wrapper">

        <div class="mv-inner">
            <div class="mvs">
                <div class="mv">
                    <img src="./img/mvplay.png" alt="">
                </div>
                <div class="mv">
                    <img src="./img/mvplay.png" alt="">
                </div>
                <div class="mv">
                    <img src="./img/mvplay.png" alt="">
                </div>
            </div>
            <div class="button">
                <div class="button-left">
                    <div class="fas fa-angle-left"></div>
                </div>
                <div class="button-right">
                    <div class="fas fa-angle-right"></div>
                </div>
            </div>
        </div>

    </div>

    <!-- 星星 -->
    <div class="stars">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

    <div class="line">
        <div class="line-left"></div>
        <div class="line-middle"></div>
        <div class="line-right"></div>
    </div>

    <div class="about-us">
        <span>关于我们</span>
    </div>

    <!-- 联系我们 -->
    <div class="connect">
        <!-- 邮箱地址 -->
        <div class="mail">
            <div class="icon-bg">
                <div class="fas fa-envelope"></div>
            </div>

            <div class="mail-add">邮箱地址</div>

            <div class="mail-text">
                <span>damai_tousu@member.alibaba.com</span>
            </div>

            <div class="mail-text">
                <span>damai_tousu@member.alibaba.com</span>
            </div>

            <div class="arrow">
                <div class="fas fa-angle-double-right"></div>
                <span>&nbsp;&nbsp;发邮件给我们</span>
            </div>

        </div>

        <!-- 电话号码 -->
        <div class="phone">
            <div class="icon-bg">
                <div class="fas fa-phone"></div>
            </div>

            <div class="mail-add">电话号码</div>

            <div class="mail-text">
                <span>（+1）1234567891</span>
            </div>

            <div class="mail-text">
                <span>（+1）9876543219</span>
            </div>

            <div class="arrow">
                <div class="fas fa-angle-double-right"></div>
                <span>&nbsp;&nbsp;打电话给我们</span>
            </div>
        </div>

        <!-- 售后与意见 -->
        <div class="view">
            <p>客服售后</p>
            <p>意见反馈</p>
            <input type="text">
            <button>发送</button>
        </div>

    </div>

    <!-- 其他 -->
    <div class="else">
        <a href="">歌曲版权说明</a>
        <a href="">商务合作</a>
        <a href="">账号信息更改</a>
    </div>

    <!-- 关注我们 -->
    <div class="att-us">

        <p>关注我们</p>
        <div class="icon-bg">
            <div class="fas fa-paper-plane"></div>
        </div>
        <div class="icon-bg">
            <div class="fab fa-facebook-f"></div>
        </div>
        <div class="icon-bg">
            <div class="fas fa-shopping-cart"></div>
        </div>
        <div class="icon-bg">
            <div class="fab fa-weibo"></div>
        </div>
        <div class="icon-bg">
            <div class="fab fa-weixin"></div>
        </div>

    </div>

</body>

</html>